<template>
<div>
  <!-- 可编辑代码 s -->
  <div class="edit-code">
    <div class="edit-code-h3 ft-18">
      <span class="selectd-rad-h9 mr5"></span>
      <span class="mr5">请求报文</span>
      <span class="edit-code-s1 ft-14">JSON</span>
    </div>
    <div class="edit-code-main edit-code-edit">
      <span class="edit-copy-btn ft-14" :data-clipboard-text="newReqContent" @click="copy">
        <i class="el-icon-document-copy ft-16"></i>
        copy
      </span>
      <editor
        ref='aceEditor'
         width="100%"
        height="250"
        v-model="newReqContent"
        @init="editorInit"
        @input='codeChange'
        lang="javascript"
        :options="editorOptions"
        theme="chrome"
      ></editor>
    </div>
  </div>
  <!-- 可编辑代码 e -->
</div>
</template>
<script>
import Clipboard from 'clipboard'
import Editor from 'vue2-ace-editor'
export default {
  props: {
    reqContent: String,
    showReadCode: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Editor
  },
  data () {
    return {
      editorOptions: {
        enableBasicAutocompletion: true, // 启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, // 启用实时自动完成
        printMarginColumn: 30,
        displayIndentGuides: false, // 显示参考线
        enableEmmet: true, // 启用Emmet
        tabSize: 4, // 标签大小
        fontSize: 16, // 设置字号
        useWorker: true, // 使用辅助对象
        showPrintMargin: false, // 去除编辑器里的竖线
        enableMultiselect: true, // 选中多处
        readOnly: false, // 是否只读
        showFoldWidgets: true, // 显示折叠部件
        fadeFoldWidgets: true, // 淡入折叠部件
        wrap: true // 换行
      }
    }
  },
  created () {
  },
  computed: {
    newReqContent: {
      get () {
        return this.reqContent
      },
      set (val) {
        this.$emit('update:reqContent', val)
      }
    }
  },
  methods: {
    copy () {
      const clipboard = new Clipboard('.edit-copy-btn')
      clipboard.on('success', e => {
        this.$notify({
          title: '复制成功',
          type: 'success',
          duration: 1000
        })
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$notify({
          title: '复制失败',
          type: 'warning',
          duration: 1000
        })
        clipboard.destroy()
      })
    },
    codeChange (val) {
      // console.log(val)
    },
    editorInit () {
      require('brace/theme/chrome')
      require('brace/ext/language_tools')
      require('brace/mode/yaml')
      require('brace/mode/json')
      require('brace/mode/less')
      require('brace/snippets/json')
      require('brace/mode/lua')
      require('brace/snippets/lua')
      require('brace/mode/javascript')
      require('brace/snippets/javascript')
      // if (this.$refs.readEditor.editor) {
      //   this.$refs.readEditor.editor.renderer.$cursorLayer.element.style.display = 'none'
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.edit-code{
  margin-top:50px;
}
.edit-code-h3{
  color:#333;
  margin-bottom:15px;
}
.edit-code-s1{
  color: #324258 ;
  border-bottom: 2px solid #C2ECFF;
}
.edit-code-s2{
  border-bottom: 2px solid #C2ECFF;
}
.edit-code-main{
  width:100%;
  box-sizing: border-box;
  border-radius: 2px;
  position: relative;
}
.edit-code-edit{
  background:#F7F8FA;
  padding: 10px 0;
  /deep/ .ace-chrome{
    color:#000;
    background:#F7F8FA;
  }
  /deep/ .ace-chrome .ace_gutter {
    color:#000;
    background:#F7F8FA;
  }
  /deep/ .ace-chrome .ace_gutter-active-line {
    background-color: #D9EDFF;
  }
  // /deep/ .ace-chrome .ace_string{
  //   color:#000;
  // }
  /deep/ .ace-chrome .ace_marker-layer .ace_active-line {
    background: #D9EDFF;
  }
}
.edit-code-main:hover>.edit-copy-btn{
  display:block;
}
.edit-code-read{
  height: 250px;
  border-radius: 2px;
  color:#8B98B5;;
  background:#F7F8FA;
  padding: 15px 12px;
  margin: 0;
  word-break: normal;
  display: block;
  overflow: auto;
}
.edit-copy-btn{
  display: none;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top:0px;
  z-index: 1;
  color:#333;
  margin: 8px;
}
</style>
